var pic = 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202102%2F26%2F20210226073347_50f94.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668131440&t=6df291a148cdb21289e91211d4daea32';
var vm = new Vue({
    el:'#app',
    data:{ //负责定义响应式数据
        list:[
            { name:'秋刀鱼',price:88,pic,count:1 },
            { name:'大黄鱼',price:777,pic,count:2 },
            { name:'皮皮虾',price:9,pic,count:3 },
        ]
    },
    methods:{ //负责定义方法
        add(item){
            item.count++;
        },
        sub(item){
            if( item.count > 1 )item.count--;
        },
        clean(){
            this.list = [];
        },
        // totalCount(){
        //     console.log('普通函数: totalCount 执行了');
        //     var sum = 0;
        //     this.list.forEach((item)=>{
        //         sum += item.count;
        //     })
        //     return sum;
        // },
        // totalPrice(){
        //     var sum = 0;
        //     this.list.forEach((item)=>{
        //         sum += item.count * item.price;
        //     })
        //     return sum;
        // }
    },
    computed:{ //负责定义计算属性
        //1.计算属性在定义时像函数,使用时像只读变量
        //2.当计算属性内部所依赖的数据发生改变时, 计算属性内部的代码会自动重新执行,计算出一个新值, 这个新值作为计算属性的值.
        //3.如果计算属性内部所依赖的数据未发生改变, 则计算属性不会重新计算, 而是使用第一次计算的缓存结果作为下一次使用的值( 计算属性会缓存计算的结果 ).

        //写法一: 回调函数
        totalCount(){
            console.log('计算属性: totalCount 执行了');
            var sum = 0;
            this.list.forEach((item)=>{
                sum += item.count;
            })
            return sum;
        },
        //写法二: setter&getter
        totalPrice: {
            get(){ //get方法会在 使用(渲染)计算属性时自动执行
                var sum = 0;
                this.list.forEach((item)=>{
                    sum += item.count * item.price;
                })
                return sum;
            },
            set(){ //set方法会在 给计算属性设置值时执行
                console.log( '给totalPrice设置值' );
            }
        }
    }
})